<!-- app.component.html -->

<form [formGroup]="form">

  <div class="form-group">
    <label for="">name: </label>
    <input type="text" formControlName="name">
  </div>
  <div class="form-group">
    <label for="">password: </label>
    <input type="password" formControlName="password">
  </div>

  <ng-container
    *ngFor="let friend of friends.controls; let i=index">
    <div class="form-group">
      <label for="">friend(s): </label>
      <input type="text" [formControl]="friend">
      <span class="cursor-pointer hover-red" (click)="addFriend()" *ngIf="i===0">+</span>
      <span class="cursor-pointer hover-red" *ngIf="i!==0" (click)="removeFriend(i)">-</span>
    </div>
  </ng-container>

  <div class="form-group">
    <label for="">contactType: </label>
    mobile<input type="radio" value="0" [(ngModel)]="contactType" [ngModelOptions]="{standalone:true}">&emsp;
    landLine<input type="radio" value="1" [(ngModel)]="contactType" [ngModelOptions]="{standalone:true}">
  </div>

  <div class="form-group">
    <label for="">{{+contactType === 1?"landLine":"mobile"}}: </label>
    <input type="text" formControlName="contact">
  </div>

  <div class="form-group">
    <button type="submit" (click)="submit()" [disabled]="form.invalid">submit</button>
    <button type="button" (click)="reset()">reset</button>
  </div>

</form>
